<template>
  <div>
    <div class="pageBox">
      <div class="flex-row" style="padding-bottom: 10px">
        <div class="flex-item">
          <el-pagination
            background
            layout="total"
            :total="total"
            style="display:inline-block;vertical-align: top;"
          ></el-pagination>
          <el-button type="success" size="small" icon="el-icon-circle-plus" @click="add">新建分类</el-button>
        </div>
        <!-- <div class="flex-item">
          <el-select size="medium" v-model="form.status" placeholder="售卖类型">
            <el-option label="全部状态" :value="null"></el-option>
            <el-option label="上架中" :value="0"></el-option>
            <el-option label="下架中" :value="1"></el-option>
          </el-select>
          <el-date-picker
            v-model="form.date"
            size="medium"
            type="daterange"
            align="right"
            unlink-panels
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            :picker-options="pickerOptions"
          ></el-date-picker>
          <el-button type="warning" size="medium" plain icon="el-icon-search" @click="search">搜索</el-button>
        </div> -->
      </div>
    </div>
    <div class="tableBox">
      <el-table
        :cell-style="{padding: '5px 0'}"
        v-loading="loading"
        stripe
        :data="tableData"
        border
        tooltip-effect="dark"
        style="width: 100%"
        height="px"
      >
        <el-table-column type="index" align="center" label="序号" width="50"></el-table-column>
        <el-table-column prop="className" show-overflow-tooltip label="分类名称" width="150"></el-table-column>
        <el-table-column prop="num" label="商品数"></el-table-column>
        <!-- <el-table-column prop="status" label="状态" width="80"></el-table-column> -->
        <el-table-column prop="createTime" label="创建时间" width="200"></el-table-column>
        <el-table-column prop="sequence" align="cneter" label="排序" width="85"></el-table-column>
        <el-table-column label="操作" width="285">
          <template slot-scope="scope">
            <!-- <el-button
              type="success"
              size="small"
              icon="el-icon-edit-outline"
              @click="changeStatus(scope.row, 1)"
            >内容编辑</el-button> -->
            <el-button type="primary" size="small" icon="el-icon-edit" @click="modify(scope.row)">编辑</el-button>
            <el-button
              type="danger"
              size="small"
              icon="el-icon-error"
              @click="del(scope.row.classID)"
            >删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <el-dialog :title="title" :visible.sync="dialog" width="450px" :modal-append-to-body="false">
      <el-form :model="form"  ref="form" label-width="110px">
      <el-form-item label="商品分类名称" prop="className">
      <el-input v-model="form.className" placeholder="请输入商品分类名称"></el-input>
      </el-form-item>
      <el-form-item label="图标Url" prop="imageUrl">
      <el-input v-model="form.imageUrl" placeholder="请输入图标Url"></el-input>
      </el-form-item>
      <el-form-item label="顺序" prop="sequence">
      <el-input type="number" v-model.number="form.sequence" placeholder="请输入商品分类顺序"></el-input>
      </el-form-item>
      <el-form-item class="form-btns">
                <el-button type="primary" @click="addName">{{form.classID?'确定修改':'立即创建'}}</el-button>
                <el-button @click="dialog = false">取 消</el-button>
      </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script type="text/ecmascript-6">
import addJson from '@/components/add2.json'
import { datePickerOptions } from '@/libs/time'
import { productTypeList, updateProductType, viewProduct, delProductType, addProductType, query, setProductStatus } from '@/api'

export default {
  name: 'goods-type',
  components: {
  },
  data() {
    return {
      name: '',
      id:'',
      title:'新建商品分类',
      dialog: false,
      form: {
        status: null,
        date: null
      },
      total: 0,
      tableData: [
        {
          name: 'sdfadsf',
          num: 12,
          status: 1,
          createTime: 'sdfadsf',
          order: 1
        },
        {
          name: 'sdfadsf',
          num: 12,
          status: 1,
          createTime: 'sdfadsf',
          order: 1
        },
        {
          name: 'sdfadsf',
          num: 12,
          status: 1,
          createTime: 'sdfadsf',
          order: 1
        }
      ],
      pickerOptions: datePickerOptions,
      loading: false
    }
  },
  created() {
     this.getData()
  },
  methods: {
    del(classID) {
      this.$confirm('此操作将永久删除该分类, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        delProductType(classID).then((res) => {
          this.getData()
          this.$message({
            message: '删除成功',
            type: 'success'
          })
        })
      })
    },
    modify(data) {
      this.form = data
      this.title='修改商品分类'
      this.dialog = true
    },
    changeStatus(data, status) {
      this.$message.error('内容编辑接口正在调试中')
    },
    add() {
      this.form = {
      }
      this.title='新建商品分类'
      this.dialog = true
    },
    addName() {
      if (!this.form.className) {
        this.$message.error('请先输入商品分类名称')
        return false
      }else{
        this.post()
      }
      this.dialog = false
    },
    post() {
      if (this.form.classID) {
        updateProductType(this.form).then(res => {
          this.$message({
            message: '修改成功',
            type: 'success'
          })
          this.getData()
          this.dialog = false
        })
      } else {
        addProductType(this.form).then(res => {
          this.$message({
            message: '添加成功',
            type: 'success'
          })
          this.getData()
          this.dialog = false
        })
      }
    },
    output() {
      this.$message.error('导出接口正在调试中')
    },
    search(data) {
      this.$message.error('搜索接口正在调试中')
    },
    getData() {
      this.loading = true
      console.log(111)
      productTypeList().then((res) => {
        console.log(res)
        this.loading = false
        this.total = res.length
        this.tableData = res
      }).catch(err => {
        console.log(err)
        console.log(err.response.data)
      })
    }
  }
}
</script>

<style scoped lang="stylus" rel="stylesheet/stylus">
.el-table--fit 
  height: calc(100vh - 145px)
.el-date-editor
  width 300px
  margin 0 10px
</style>
